<template>
  <div class="header-info">
    <!--区域设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.areaHeight"
        />
      </el-form-item>
    </div>
    <el-form-item label="logo">
      <el-button type="primary" @click="handleSelectLogo">选择LOGO</el-button>
      <div class="picture-wrap">
        <template v-if="!!optionsInfo?.logoUrl?.val?.url">
          <img :src="`${optionsInfo.logoUrl?.val?.url}`" alt="企业Logo" />
          <p class="icon-wrap" @click="handleDeletePicture('logoUrl')">
            <i class="el-icon-close icon-delete" />
          </p>
        </template>
        <template v-else>
          <div class="el-upload el-upload--text" @click="handleSelectLogo">
            <i class="el-icon-plus avatar-uploader-icon" />
          </div>
        </template>
      </div>
    </el-form-item>
    <el-form-item label="坐诊提示"> 
      <el-input type="textarea" v-model="optionsInfo.zzTip" ></el-input>
    </el-form-item>
     <el-form-item label="坐诊提示颜色">
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.zzTipFontColor"
          />
        </el-form-item>
<el-form-item label="坐诊提示字体大小" class="wait-patient-set">
            <el-input-number
              v-model="optionsInfo.zzTipFontSize"
              :min="1"
              :max="99"
              size="small"
              class="hide-spin-button"
            />
          </el-form-item>
    <!--候诊就诊设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">候诊就诊设置</el-divider>
      </div>

      <el-form-item label="当前检查患者">
        <el-input
          size="small"
          class="hide-spin-button"
          v-model="optionsInfo['currentPatientContent']"
        />
      </el-form-item>

      <el-form-item label="待诊患者">
        <el-input
          size="small"
          class="hide-spin-button"
          v-model="optionsInfo['waitingPatientContent']"
        />
      </el-form-item>
      <template v-if="!optionsInfo.waitingPatientHide">
        <el-form-item label="候诊类型设置" class="wait-patient-set">
          <el-radio-group
            v-model="optionsInfo.waitPatientType"
            @change="handleChangeType"
          >
            <el-radio
              :label="item.value"
              v-for="item in waitPatientTypeOptions"
              :key="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="optionsInfo.waitPatientType === 1">
          <el-form-item label="候诊就诊" class="wait-patient-set">
            <el-radio-group
              v-model="optionsInfo.waitMode"
              :disabled="optionsInfo.waitingPatientHide"
            >
              <el-radio
                :label="item.value"
                v-for="item in options"
                :key="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
        <template v-if="optionsInfo.waitPatientType === 2">
          <el-form-item label="候诊人数" class="wait-patient-set">
            <el-input-number
              v-model="optionsInfo.waitPatientNumber"
              :min="1"
              :max="99"
              size="small"
              class="hide-spin-button"
            />
          </el-form-item>
        </template>
      </template>
    </div>
    <template v-if="optionsInfo['layerNameKey'] === 'room-call-patient'">
      <div
        class="list-item-setting"
        v-for="(item, index, key) in optionsInfo['layerInfo']"
        :key="index"
      >
        <div class="title-info">
          <el-divider content-position="left">{{
            index === "current" ? "就诊弹层设置" : "候诊弹层设置"
          }}</el-divider>
        </div>
        <el-form-item label="标题">
          <el-input
            v-model="optionsInfo['layerInfo'][index].content"
            placeholder="请输入内容"
            size="small"
          />
        </el-form-item>
        <!-- <el-form-item label="显示">
          <el-switch v-model="optionsInfo['layerInfo'][index]['display']" />
        </el-form-item> -->
        <!-- <el-form-item label="字号">
          <el-input-number
            :min="14"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo['layerInfo'][index].fontSize"
          />
        </el-form-item> -->
        <el-form-item label="背景颜色">
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['layerInfo'][index].backgroundColor"
          />
        </el-form-item>
        <el-form-item label="标题字体色">
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['layerInfo'][index].color"
          />
        </el-form-item>
        <el-form-item label="内容字体色">
          <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['layerInfo'][index].patientColor"
          />
        </el-form-item>
      </div>
    </template>
    <!-- 主题颜色 -->
    <div class="list-item-setting" v-if="optionsInfo.themeColor">
      <div class="title-info">
        <el-divider content-position="left">主题颜色</el-divider>
      </div>
      <el-form-item label="深色区域">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo.themeColor"
        />
      </el-form-item>
      <el-form-item label="浅色区域">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo.themeColorQian"
        />
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker
          size="small"
          show-alpha
          :predefine="predefineColors"
          v-model="optionsInfo.themeColorFont"
        />
      </el-form-item>
    </div>
    <!-- 科室设置 -->
    <div class="list-item-setting" v-if="optionsInfo.deptConfig">
      <div class="title-info">
        <el-divider content-position="left">科室设置</el-divider>
      </div>
      <el-form-item label="" class="wait-patient-set">
        <el-radio-group v-model="optionsInfo.deptNameKey">
          <el-radio
            :label="item.value"
            v-for="item in deptList"
            :key="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">二维码设置</el-divider>
      </div>
      <el-form-item label="互联网医院" class="logo-area-set">
        <el-button
          type="primary"
          @click="handleSelect('hospitalCode', optionsInfo.hospitalCode)"
          >二维码</el-button
        >
        <div class="picture-wrap">
          <template
            v-if="
              !!(
                !!optionsInfo?.hospitalCode &&
                !!optionsInfo?.hospitalCode?.length &&
                !!optionsInfo?.hospitalCode[0].url
              )
            "
          >
            <img :src="`${optionsInfo.hospitalCode[0].url}`" alt="互联网医院" />
            <p class="icon-wrap" @click="handleDeletePicture('hospitalCode')">
              <i class="el-icon-close icon-delete" />
            </p>
          </template>
          <template v-else>
            <div
              class="el-upload el-upload--text"
              @click="handleSelect('hospitalCode', optionsInfo.hospitalCode)"
            >
              <i class="el-icon-plus avatar-uploader-icon" />
            </div>
          </template>
        </div>
      </el-form-item>
      <el-form-item label="第一行底部提示文字">
        <el-input
          v-model="optionsInfo.bottomTipText1"
          type="text"
          size="small"
        />
      </el-form-item>
      <el-form-item label="第一行底部提示文字">
        <el-input
          v-model="optionsInfo.bottomTipText2"
          type="text"
          size="small"
        />
      </el-form-item>
      <el-form-item label="底部提示字体大小">
        <el-input-number
          v-model="optionsInfo.bottomTipFontSize"
          :min="1"
          :max="99"
          size="small"
        />
      </el-form-item>
    </div>
    <!--选择图片的弹层-->
    <UpdatePicture
      :visible="pictureInfo.visible"
      :info="pictureInfo.info"
      @handleCancel="handleCancel"
      @handleSure="handleSure"
    />
    <!--选择图片的弹层-->
    <SelectPicture
      :info="logoPictureInfo.info"
      :visible="logoPictureInfo.visible"
      @handleSure="handleSureLogo"
      @handleCancel="handleCancelLogo"
    />
  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import roomNameKeyEditor from "@sc/templateDetails/modules/homeRight/property-editor/module/scene-edit/basicInfo/roomNameKey-editor.vue";
import UpdatePicture from "@c/public/layer/template/updatePicture/index.vue";
import * as types from "@c/public/form-designer/devType/datas-types";
import SelectPicture from "@c/public/layer/template/selectPicture/index.vue";
export default {
  name: "nxDRCConfig-editor",
  components: { UpdatePicture, roomNameKeyEditor, SelectPicture },
  componentName: "nxDRCConfig-editor",
  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ["serverFieldList", "getDesignerConfig"],

  data() {
    return {
      radio: 1,
      optionsInfo: Object(),
      options: [
        {
          value: 1,
          label: "叫1等1",
        },
        {
          value: 2,
          label: "叫1等2",
        },
        {
          value: 3,
          label: "叫1等3",
        },
        {
          value: 4,
          label: "叫1等4",
        },
      ],
      checkList: [],
      topOptions: [
        {
          value: 1,
          label: "科室",
        },
        {
          value: 2,
          label: "号别",
        },
        {
          value: 3,
          label: "诊室",
        },
      ],
      constantDic: constantDic,
      predefineColors: types["predefineColors"],
      waitPatientTypeOptions: [
        {
          value: 1,
          label: "诊室等候",
        },
        {
          value: 2,
          label: "候诊列表",
        },
      ],
      doctorShown: [
        {
          value: 1,
          label: "医生:顺序优先",
        },
        {
          value: 2,
          label: "医生:时间优先",
        },
      ],
      registerSourceOptions: [
        {
          value: 1,
          disabled: true,
          label: "当前医生所在科室号别",
        },
        {
          value: 2,
          label: "当前医生呼叫患者号别",
        },
      ],
      fontWeightOptions: types["fontWeightOptions"],
      pictureInfo: {
        info: Object(),
        visible: false,
      },
      deptList: [
        {
          value: "deptName",
          label: "医生科室",
        },
        {
          value: "oldDeptName",
          label: "屏幕科室",
        },
        {
          value: "oldDeptShortName",
          label: "屏幕科室简称",
        },
      ],
      logoPictureInfo: {
        info: Object(),
        visible: false,
      },
    };
  },

  computed: {
    registerObjNameOptions() {
      return this.$store.getters["templateDetails/getRegisterObjNameOptions"];
    },
  },

  methods: {
    handleDept(val) {
      if (val) {
        this.optionsInfo.followDept = false;
      }
    },

    handleChangeType(val) {
      if (val === 1) {
        this.optionsInfo.openScroll = false;
        this.optionsInfo.waitPatientStep = 1;
        this.optionsInfo.waitPatientNumber = 4;
      } else if (val === 2) {
        this.optionsInfo.waitMode = 1;
      }
    },

    // 科室诊室&号别--科室和好别不能共存
    handleChange(val, row) {
      let value = row.value;
      let { checkList } = this.optionsInfo;
      if (value === 1) {
        if (val) {
          this.$lodash.pull(checkList, 2);
        }
      }
      if (value === 2) {
        if (val) {
          this.$lodash.pull(checkList, 1);
        }
      }
    },

    handleFollowDept(val) {
      if (val) {
        this.optionsInfo.deptHide = false;
      }
    },
    handleSelectLogo() {
      let info = Object();
      let { logoUrl } = this.optionsInfo;
      Reflect.set(info, "content", logoUrl);
      Reflect.set(info, "type", 1);
      Reflect.set(this.logoPictureInfo, "visible", true);
      Reflect.set(this.logoPictureInfo, "info", info);
    },
    // 取消弹层
    handleCancelLogo() {
      Reflect.set(this.logoPictureInfo, "visible", false);
    },

    // 更新就的数据
    handleSureLogo(valInfo) {
      console.log(valInfo, "valInfo");
      const self = this;
      Reflect.set(self.optionsInfo, "logoUrl", valInfo);
    },
    // 选择图片
    handleSelect(val, content) {
      let params = Object();
      switch (val) {
        case "publicCode":
        case "hospitalCode":
          let content2 = !!(content?.length && content[0]?.url) ? content : "";
          Reflect.set(params, "updataType", val);
          Reflect.set(params, "type", "image");
          Reflect.set(params, "multiple", false);
          Reflect.set(params, "content", content2 || "");
          Reflect.set(this.pictureInfo, "visible", true);
          Reflect.set(this.pictureInfo, "info", params);
          break;
      }
    },

    // 删除图片
    handleDeletePicture(key) {
      Reflect.set(this.optionsInfo, key, "");
    },

    // 关闭弹层
    handleCancel() {
      Reflect.set(this.pictureInfo, "visible", false);
    },

    // 更新就的数据
    handleSure(valInfo) {
      let { key, val } = valInfo;
      Reflect.set(this.optionsInfo, key, val);
    },
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>


<style lang="scss" scoped>
//候诊&就诊等待
.wait-patient-set {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-radio-group {
      display: flex;
      flex-direction: column;

      .el-radio {
        padding: 10px 0;
      }
    }
  }
}

.follow-dept {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    margin-bottom: 8px;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
}

//科室 诊室 号别
.dept-number-room-set {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    margin-bottom: 8px;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }
  }
}

//号别简称
.register-info {
  :deep(.el-form-item__content) {
    margin-left: 1px !important;

    .title {
      width: 100%;
    }

    .el-radio-group {
      .el-radio {
        width: 100%;
        padding: 8px 0;
      }
    }
  }
}

//互联网医院
.logo-area-set {
  display: flex;
  position: relative;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    display: flex;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-button {
      position: absolute;
      top: -30px;
      right: 0;
    }

    .picture-wrap {
      margin-top: 10px;
      position: relative;
      overflow: hidden;
      width: 108px;
      height: 108px;

      img {
        border-radius: 4px;
        overflow: hidden;
        width: 100%;
      }

      .icon-wrap {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        border-radius: 0 0 100px 0;

        .icon-delete {
          font-weight: bold;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .el-upload {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 108px;
        height: 108px;
        cursor: pointer;
        line-height: 116px;
        vertical-align: top;

        &:hover {
          border-color: #409eff;
          color: #409eff;
        }

        .el-icon-plus {
          font-size: 1.25rem;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }
}

.tooltip-icon {
  border: none;
  background: transparent;
  padding: 0 12px 0 12px;
  font-size: 18px;
  border-radius: 0;
  color: #e6a23c;
}
.picture-wrap {
  margin: 10px 0 20px 0;
  position: relative;
  overflow: hidden;

  img {
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
  }

  .icon-wrap {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    border-radius: 0 0 100px 0;

    .icon-delete {
      font-weight: bold;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .el-upload {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 108px;
    height: 108px;
    cursor: pointer;
    line-height: 116px;
    vertical-align: top;

    &:hover {
      border-color: #409eff;
      color: #409eff;
    }

    .el-icon-plus {
      font-size: 1.25rem;
      color: rgba(0, 0, 0, 0.45);
    }
  }
}
</style>

